<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body>
		<pre>
      自定义指令：

        vue 本身提供的一些指令满足不了业务的需求，一般很少自定义
    </pre>
		<div id="app">
			<!-- 在使用指令的时候传递相关参数 -->
			<input type="text" v-color="{ bgColor: 'yellow', fontColor: 'red'}" />
		</div>

		<script src="scripts/vue.js"></script>
		<script>
			Vue.directive('color', {
				inserted: function (el, params) {
					// el: 使用了自定义指令的元素
					// params：指自定义的参数(名字params随意)
					console.log(params)
					el.style.backgroundColor = params.value.bgColor
					el.style.color = params.value.fontColor
				},
			})
			var vm = new Vue({
				el: '#app',
				data: {},
				methods: {},
			})
		</script>
	</body>
</html>
